<template>
  <div class="special_purple">
    <div class="special_purple_header">
      <div class="special_purple_header_select">
        <Select :index="1" @selected="handleSelected" theme="blue"></Select>
      </div>
    </div>
    <div class="special_purple_moudle">
      <div class="slider_img">
        <ImageSlider />
      </div>
      <div class="china_map">
        <ChinaMap v-if="mapflag" :data="qgdtData" />
        <SuzhouMap v-else :data="szdtData" />
      </div>
      <div class="year_select">
        <YearSelect theme="blue" />
      </div>
      <div class="special_purple_centersummmery">
        <span class="summmery_title douyu">涉互联网案件人数</span>
        <span class="summmery_number douyu">
          {{ formatNumber(totalCount) }}
        </span>
      </div>
      <div class="special_purple_center_bottom" style="z-index: 9">
        <div class="left">
          <CardPurple
            name="涉数据、虚拟财产纠纷和个人信息保护纠纷"
            theme="blue"
          >
            <Echarts
              :full-options="VirtualPropertyOptions"
              :loading="allLoading"
            />
          </CardPurple>
        </div>
        <div class="right">
          <CardPurple name="数据资源刑事案件、数据资源行政案件" theme="blue">
            <Echarts :full-options="souceOptions" :loading="allLoading" />
          </CardPurple>
        </div>
      </div>
      <div class="special_purple_moudle_item left" style="z-index: 9">
        <CardPurple name="网络人格权纠纷" theme="blue">
          <Echarts
            :full-options="NetPersonalityOptions"
            :loading="allLoading"
          />
        </CardPurple>
        <CardPurple name="网络服务合同纠纷" theme="blue">
          <div class="left_center_module">
            <Echarts :full-options="LoanRatioOptions" :loading="allLoading" />
          </div>
        </CardPurple>
        <CardPurple name="信息网络买卖合同纠纷、产品责任纠纷" theme="blue">
          <Echarts :full-options="ContractRatioOptions" :loading="allLoading" />
        </CardPurple>
        <CardPurple name="新就业形态劳动争议纠纷" theme="blue">
          <Echarts :full-options="NewJobFormOptions" :loading="allLoading" />
        </CardPurple>
      </div>
      <div class="special_purple_moudle_item right" style="z-index: 9">
        <div class="h1">
          <CardPurple :name="'审管数据'" theme="blue">
            <div class="right_top_module">
              <div class="data_wrap">
                <div class="l_text_wrap">
                  <div class="item">
                    <span class="lab">立案数:</span>
                    <div class="item_val">
                      <span class="num"> {{ formatNumber(sgsj.las) }} </span>件
                    </div>
                  </div>
                  <div class="item">
                    <span class="lab">结案数:</span>
                    <div class="item_val">
                      <span class="num"> {{ formatNumber(sgsj.jas) }} </span>件
                    </div>
                  </div>
                  <div class="item">
                    <span class="lab">上诉率:</span>
                    <div class="item_val">{{ sgsj.ssl }}</div>
                  </div>
                  <div class="item"></div>
                </div>
              </div>
              <div class="bottom_box">
                <div class="bt_item">
                  <span class="bt_name">一审息诉服判率</span>
                  <span class="bt_num">{{ sgsj.ysfpxsl }}</span>
                </div>
                <div class="bt_item">
                  <span class="bt_name">自动履行率</span>
                  <span class="bt_num">{{ sgsj.zdlxl }}</span>
                </div>
                <div class="bt_item">
                  <span class="bt_name">发回改判率</span>
                  <span class="bt_num">{{ sgsj.fhgpl }}</span>
                </div>
                <div class="bt_item">
                  <span class="bt_name">信访投诉率</span>
                  <span class="bt_num">{{ sgsj.sxnjal }}</span>
                </div>
              </div>
            </div>
          </CardPurple>
        </div>
        <div class="h1">
          <CardPurple :name="'电子卷宗数据'" theme="blue">
            <div class="ectronic_file">
              <div class="green_box">
                <div class="icon">
                  <img src="@/assets/image/posture/green_spare.png" alt="" />
                </div>
                <span class="tit">{{ dzjz[0]?.lb }}</span>
                <span class="num douyu">{{ formatNumber(dzjz[0]?.sjl) }}</span>
              </div>
              <div class="blue_box">
                <div class="icon">
                  <img src="@/assets/image/posture/blue_spare.png" alt="" />
                </div>
                <span class="tit">{{ dzjz[1]?.lb }}</span>
                <span class="num douyu">{{ formatNumber(dzjz[1]?.sjl) }}</span>
              </div>
              <div class="total_box"></div>
            </div>
          </CardPurple>
        </div>
        <div class="h2">
          <CardPurple name="其他互联网民事案件" theme="blue">
            <Echarts
              :full-options="ReceiptsbalancesOptions"
              :loading="allLoading"
            />
          </CardPurple>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="posture">
import { ref, reactive, onMounted, watch, onBeforeUnmount } from "vue";
import Select from "@/components/Select.vue";
import CardPurple from "@/components/CardPurple.vue";
import Echarts from "@/components/Echarts.vue";
import YearSelect from "@/components/YearSelect.vue";
import ChinaMap from "./ChinaMap.vue";
import SuzhouMap from "./SuzhouMap.vue";
import { options } from "./options";
import { useYearStore } from "@/store/index.js";
import ImageSlider from "@/components/ImageSlider.vue";
import { getSituationQgdt } from "@/api/tsfx";
import {
  getCauseDzjz,
  getCauseQthlwmsaj,
  getCauseSgsj,
  getCauseSjzyxzaj,
  getCauseSsjxlcc,
  getCauseWlfwhtjf,
  getCauseWlrgjf,
  getCauseSdcrsj,
  getCauseSzdt,
} from "@/api/ayfx.js";

const yearStore = useYearStore();

//电子卷宗数据
const dzjz = ref([]);
const queryDzjz = (data) => {
  getCauseDzjz(data).then((res) => {
    dzjz.value = res.data.data;
  });
};

//其他互联网民事案件
const ReceiptsbalancesOptions = reactive({ options: {}, init: false });
const queryQthlwmsaj = (data) => {
  getCauseQthlwmsaj(data).then((res) => {
    ReceiptsbalancesOptions.options = options.Receiptsbalances(
      res.data.data[0]
    );
  });
};

//审管数据
const sgsj = ref({});
const querySgsj = (data) => {
  getCauseSgsj(data).then((res) => {
    sgsj.value = res.data.data[0];
  });
};

//数据资源行政案件、刑事案件
const souceOptions = reactive({ options: {}, init: false });
const querySjzyxzaj = (data) => {
  getCauseSjzyxzaj(data).then((res) => {
    souceOptions.options = options.sourOptions(res.data.data);
  });
};

//涉数据、虚拟财产和个人信息保护纠纷
const VirtualPropertyOptions = reactive({ options: {}, init: false });
const querySsjxlcc = (data) => {
  getCauseSsjxlcc(data).then((res) => {
    VirtualPropertyOptions.options = options.VirtualProperty(res.data.data);
  });
};

//网络服务合同纠纷
const LoanRatioOptions = reactive({ options: {}, init: false });
const queryWlfwhtjf = (data) => {
  getCauseWlfwhtjf(data).then((res) => {
    LoanRatioOptions.options = options.LoanRatio(res.data.data[0]);
  });
};

//网络人格权纠纷
const NetPersonalityOptions = reactive({ options: {}, init: false });
const queryWlrgjf = (data) => {
  getCauseWlrgjf(data).then((res) => {
    NetPersonalityOptions.options = options.NetPersonality(res.data.data);
  });
};

//信息网络买卖合同纠纷、产品责任纠纷  新就业形态劳动争议纠纷
const ContractRatioOptions = reactive({ options: {}, init: false });
const NewJobFormOptions = reactive({ options: {}, init: false });
const queryCauseSdcrsj = () => {
  getCauseSdcrsj().then((res) => {
    let data1 = res.data.data.filter(
      (item) => item.fl == "信息网络买卖合同纠纷、产品责任纠纷"
    );
    let data2 = res.data.data.filter(
      (item) => item.fl == "新就业形态劳动争议纠纷"
    );
    ContractRatioOptions.options = options.ContractRatio(data1);
    NewJobFormOptions.options = options.NewJobForm(data2);
  });
};

//全国地图
const qgdtData = ref([]);
const totalCount = ref(0);
const queryQgdt = (data) => {
  getSituationQgdt(data).then((res) => {
    qgdtData.value = res.data.data;
  });
};

//苏州地图
const szdtData = ref([]);
const querySzdt = (data) => {
  getCauseSzdt(data).then((res) => {
    szdtData.value = res.data.data;
    totalCount.value = szdtData.value.reduce((pre, cur) => {
      return pre + cur.rs * 1;
    }, 0);
  });
};
watch(
  () => yearStore.year,
  (v) => {
    const data = {
      starttime: v + "0101",
      endtime: v + "1231",
    };
    queryQgdt(data);
    querySzdt(data);
    queryDzjz(data);
    queryQthlwmsaj(data);
    querySgsj(data);
    querySjzyxzaj(data);
    querySsjxlcc(data);
    queryWlfwhtjf(data);
    queryWlrgjf(data);
    queryCauseSdcrsj();
  },
  {
    immediate: true,
  }
);

const handleSelected = (val) => {
  console.log(val);
};
const allLoading = ref(true);

onMounted(() => {
  setTimeout(() => {
    allLoading.value = false;
  }, 1000);
});

function formatNumber(num) {
  return new Intl.NumberFormat().format(num);
}

// 地图切换
const mapflag = ref(true);
// 定时切换
const timer = setInterval(() => {
  mapflag.value = !mapflag.value;
  if (mapflag.value) {
    totalCount.value = qgdtData.value.reduce((pre, cur) => {
      return pre + cur.rs * 1;
    }, 0);
  } else {
    totalCount.value = szdtData.value.reduce((pre, cur) => {
      return pre + cur.rs * 1;
    }, 0);
  }
}, 30 * 1000);

// 清除定时器
const clearTimer = () => {
  clearInterval(timer);
};

onBeforeUnmount(() => {
  clearTimer();
  allLoading.value = true;
});
</script>

<style lang="scss" scoped>
.special_purple {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/image/posture/bg.png");
  background-size: cover;

  .special_purple_header {
    width: 100%;
    height: 88px;
    background: url("../../assets/image/posture/sp_header.png");
    background-size: cover;

    .special_purple_header_select {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      padding-right: 20px;
      align-items: flex-end;
      box-sizing: border-box;
      position: relative;
      z-index: 99;
    }
  }

  .special_purple_moudle {
    width: 100%;
    height: calc(100% - 88px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    position: relative;

    .china_map {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }

    .slider_img {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translateY(40px);
    }

    .special_purple_moudle_item {
      width: 500px;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .special_purple_moudle_item {
      width: 500px;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
  }

  // 左一
  .left_top_module {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .item {
      width: 100%;
      height: 80px;
      background: rgba(35, 48, 114, 0.5);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px 10px 10px;

      .icon_wrap {
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .chart_wrap {
        width: 355px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        .lab_wrap {
          width: 100%;
          height: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          span {
            font-family: MicrosoftYaHei;
            font-size: 14px;
            color: #d0deee;
            line-height: 19px;
            text-align: center;
            font-style: normal;
          }

          .lab {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
            margin-right: 10px;
          }

          .lab_value {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
          }
        }

        .bar_wrap {
          width: 100%;
          height: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-radius: 10px;
          border: 1px solid rgba(133, 153, 217, 0.26);
          box-sizing: border-box;
          padding: 6px;

          .purple_bar {
            background: #5572e8;
            height: 8px;
            border-radius: 4px 0 0 4px;
          }

          .pink_bar {
            background: #fd6ea9;
            height: 8px;
            border-radius: 0 4px 4px 0;
          }
        }
      }
    }
  }

  //  左二
  .left_center_module {
    width: 100%;
    height: 100%;

    .info {
      font-family: MicrosoftYaHei;
      font-size: 14px;
      color: #ffffff;
      line-height: 30px;
      text-align: left;
      font-style: normal;

      .num {
        font-size: 20px;
        color: #5572e8;
      }
    }

    .chart_wrap {
      width: 100%;
      height: calc(100% - 30px);
      box-sizing: border-box;
    }
  }

  //  左三
  .left_bottom_module {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .image_wrap {
      width: 198px;
      height: 181px;
      display: flex;
      justify-content: center;
    }
  }

  // 右一
  .right_top_module {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;

    .data_wrap {
      height: 180px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
    }

    .l_text_wrap {
      width: 300px;
      height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      background: url("../../assets/image/posture/pnab.png") no-repeat;
      background-size: contain;
      padding: 25px 10px 80px;
      // position: absolute;
      // top: -10px;
      // left: -60px;
    }

    .item {
      width: 140px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      // padding: 0 16px 0 28px;
      position: relative;

      .lab {
        font-family: MicrosoftYaHei;
        font-size: 12px;
        color: #d0deee;
        display: inline-block;
        margin-right: 10px;
      }

      .item_val {
        color: #fff;

        font-size: 14px;

        .num {
          display: inline-block;
          font-size: 14px;
          font-weight: bold;
        }
      }
    }

    .bottom_box {
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;

      .bt_item {
        flex: 1;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        background: linear-gradient(
          180deg,
          rgba(21, 154, 255, 0) 0%,
          rgba(21, 154, 255, 0.1) 30%,
          rgba(21, 154, 255, 0.2) 100%
        );
        border-bottom: 2px solid #159aff;

        span {
          display: block;
        }

        .bt_name {
          font-size: 13px;
          font-family: MicrosoftYaHei;
          color: #ffffff;
          text-align: center;
          font-style: normal;
        }

        .bt_num {
          font-family: MicrosoftYaHei;
          font-weight: bold;
          font-size: 15px;
          color: #159aff;
          line-height: 20px;
          text-align: center;
          font-style: normal;
        }
      }
    }

    .r_chart {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }

  // 右二

  // 中间
  .special_purple_center_bottom {
    bottom: 0;
    height: 25%;
    width: 900px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;

    .right {
      width: 425px;
      height: 100%;
    }

    .left {
      width: 445px;
      height: 100%;
      z-index: 9;
    }
  }

  .special_purple_centersummmery {
    width: 600px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 30px;
    transform: translate(-50%, 0);

    .summmery_title {
      font-weight: normal;
      font-size: 24px;
      color: #fff;
      line-height: 27px;
      text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.74);
      text-align: center;
      font-style: normal;
    }

    .summmery_number {
      font-weight: normal;
      font-size: 36px;
      color: #ffd565;
      line-height: 40px;
      letter-spacing: 3px;
      text-align: center;
      font-style: normal;
    }
  }

  .year_select {
    position: absolute;
    left: 560px;
    top: 80px;
    z-index: 999;
  }

  // ectronic_file 电子卷宗
  .ectronic_file {
    width: 100%;
    height: 100%;
    background: url("../../assets/image/posture/ectronic_file_bg.png") no-repeat
      center center;
    background-size: contain;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    .green_box {
      position: absolute;
      left: 10px;
      top: 16px;
      width: 134px;
      height: 55px;
      padding: 10px 34px 10px 10px;
      box-sizing: border-box;
      background: rgba(111, 213, 145, 0.2);
      display: flex;
      flex-direction: column;

      .num {
        text-shadow: 0px 0px 4px #6fd591;
      }

      span {
        text-align: right;
      }

      .icon {
        right: 10px;
        top: 10px;
      }

      .line {
        width: 100%;
        height: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.26);
      }
    }

    .yellow_box {
      position: absolute;
      right: 28px;
      top: 0;
      width: 135px;
      height: 52px;
      padding: 10px 10px 10px 34px;
      box-sizing: border-box;
      background: rgba(255, 201, 122, 0.2);
      display: flex;
      flex-direction: column;

      .icon {
        left: 10px;
        top: 10px;
      }

      .num {
        text-shadow: 0px 0px 4px #ffc97a;
      }
    }

    .blue_box {
      position: absolute;
      right: 20px;
      bottom: 16px;
      width: 140px;
      height: 52px;
      padding: 10px 10px 10px 34px;
      box-sizing: border-box;
      background: rgba(21, 154, 255, 0.2);
      display: flex;
      flex-direction: column;

      .icon {
        left: 10px;
        top: 10px;
      }

      .num {
        text-shadow: 0px 0px 4px #159aff;
        text-align: left;
      }
    }

    .icon {
      position: absolute;
      width: 14px;
      height: 14px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .tit {
      font-family: MicrosoftYaHei;
      font-size: 12px;
      color: #ffffff;
      line-height: 13px;
      text-align: left;
      font-style: normal;
    }

    .num {
      font-family: DOUYU, DOUYU;
      font-weight: normal;
      font-size: 12px;
      color: #ffffff;
      line-height: 24px;
      text-align: center;
      font-style: normal;
    }

    .total_box {
      transform: translateX(30px);

      .tname {
        font-family: MicrosoftYaHei;
        font-size: 12px;
        color: #ffffff;
        line-height: 30px;
        text-align: center;
        font-style: 500;
        display: block;
        width: 100%;
      }

      .tnum {
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
        line-height: 24px;
        text-align: center;
        font-style: normal;
      }

      .blue {
        color: #00cff1;
        font-size: 24px;
      }
    }
  }

  .h-25p {
    height: calc(25% - 10px);
  }
}

.h1 {
  height: calc(37.5% - 12px);
}

.h2 {
  height: calc(25% + 20px);
  transform: translateY(20px);
}
</style>
